import {Outlet} from 'umi';

import {
    GithubFilled,
    InfoCircleFilled,
    QuestionCircleFilled,
} from '@ant-design/icons';
import {PageContainer, ProCard, ProLayout} from '@ant-design/pro-components';
import {useEffect, useState} from 'react';
import defaultProps from './_defaultProps';
import {getUserInfo} from "@/utils/api/account/common";
import {history} from "umi";


export default function Layout() {
    const [pathname, setPathname] = useState('/');
    const [user_info, set_user_info] = useState({});
    useEffect(() => {
        get_user_info();
    }, []);

    const get_user_info = async () => {
        getUserInfo().then((res) => {
            console.log(res.data);
            set_user_info({...user_info, ...res.data})
        });
    }

    return (
        <div
            id="test-pro-layout"
            style={{
                height: '100vh',
            }}
        >
            <ProLayout
                siderWidth={216}
                bgLayoutImgList={[
                    {
                        src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
                        left: 85,
                        bottom: 100,
                        height: '303px',
                    },
                    {
                        src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
                        bottom: -68,
                        right: -45,
                        height: '303px',
                    },
                    {
                        src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
                        bottom: 0,
                        left: 0,
                        width: '331px',
                    },
                ]}
                {...defaultProps}
                location={{
                    pathname,
                }}
                avatarProps={{
                    src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
                    title: user_info.nickname,
                    size: 'small',
                }}
                actionsRender={(props) => {
                    if (props.isMobile) return [];
                    return [
                        <InfoCircleFilled key="InfoCircleFilled"/>,
                        <QuestionCircleFilled key="QuestionCircleFilled"/>,
                        <GithubFilled key="GithubFilled"/>,
                    ];
                }}
                menuItemRender={(item, dom) => (
                    <div
                        onClick={() => {
                            console.log(item);
                            setPathname(item.path || '/welcome');
                            history.push(item.path);
                        }}
                    >
                        {dom}
                    </div>
                )}
            >
                <PageContainer>
                    <ProCard
                        style={{
                            height: 'auto',
                            minHeight: 850
                        }}
                    ><Outlet/>
                    </ProCard>
                </PageContainer>
            </ProLayout>
        </div>
    );
};